<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box{
            width: 100px;height: 100px;background: red;
            /*规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。*/
            opacity: 0.3;filter: alpha(opacity=30);
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        box.onmouseover = function () {
            startMove(box,100);
        }
        box.onmouseout = function () {
            startMove(box,30);
        }


        //定义透明度起始点
        var alpha = 30;
        var timer = null;
        function startMove(obj,target) {
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (target-alpha)/10;
                speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);

                if(alpha==target){
                    clearInterval(timer);
                }else {
                    alpha = alpha+speed;
                    obj.style.opacity = alpha/100;
                }
                document.title = alpha;
            },30)
        }

    </script>


</body>
</html>